<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :maskClosable="true"
    :title="title"
    :visible="visible"
    :width="width"
    cancelText="关闭"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-form-model
      ref="dealForm"
      :model="model"
    >
      <a-form-model-item
        ref="dealContent"
        :rules="rules.dealContent"
        label="处理内容"
        prop="dealContent"
      >
        <a-textarea v-model="model.dealContent" placeholder="请输入处理内容" rows="4"/>
      </a-form-model-item>
    </a-form-model>

  </a-modal>
</template>

<script>
import {getAction} from '@api/manage'

export default {
  name: 'AlarmDealModel',
  data() {
    return {
      title: '告警处理',
      width: 600,
      visible: false,
      confirmLoading: false,
      model: {
        dealContent: ''
      },
      rules: {
        dealContent: [
          {required: true, message: '请输入处理内容!'},
          {min: 6, max: 100, message: '实例告警长度为6-100个字符'}
        ]
      }
    }
  },
  methods: {
    deal(record) {
      this.model.id = record.id || ''
      this.model.dealContent = record.dealContent || ''
      this.visible = true
      this.$forceUpdate()
    },
    close() {
      this.model = {}
      this.confirmLoading = false
      this.visible = false
    },
    handleOk() {
      const scope = this
      console.log(this.model)
      // 触发表单验证
      this.$refs.dealForm.validate(valid => {
        if (valid) {
          scope.confirmLoading = true
          getAction('alarm/record/updateDeal', scope.model).then(res => {
            if (res.success) {
              scope.$message.success(res.message)
              scope.$emit('ok')
            } else {
              scope.$message.warning(res.message)
            }
          })
            .finally(() => {
              scope.confirmLoading = false
              scope.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>

</style>